<template>
  <div class="login_container">
    <div class="login_box">
      <div>
        <img class="logo_box" src="../assets/logo.png">
      </div>

      <!--      表单区域-->
      <div class="form_box">
        <el-form label-width="0px" :rules="loginFormRules" ref="loginFormFef" :model="loginForm">
          <el-form-item prop="username">
            <el-input placeholder="帐号" v-model="loginForm.username" prefix-icon="el-icon-user"></el-input>
          </el-form-item>
          <!--        后面需要实现俩端对齐-->
          <el-form-item prop="password">
            <el-input placeholder="密码" v-model="loginForm.password" prefix-icon="el-icon-s-tools"
                      type="password"></el-input>
          </el-form-item>

          <el-form-item class="btns_box">
                <el-button type="primary" @click="onSubmit">登录</el-button>
                <el-button type="info" @click="onResetForm">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: "login",
    data() {
      return {
        loginFormRules: {
          username: [
            {required: true, message: '请输入用户名', trigger: 'blur'},
            {min: 3, max: 11, message: '用户名应该大于3位', trigger: 'blur'}
          ],
          password: [
            {required: true, message: '请输入密码', trigger: 'blur'},
            {min: 3, max: 11, message: '密码应该大于3位', trigger: 'blur'}
          ]
        },
        loginForm:{

        },

      }
    },
    methods:{
      onSubmit(){
        this.$router.push('/home')
        // this.$refs.loginFormFef.validate((valid)=> {
        //   if (!valid) {
        //     this.$message({ message: "请检查输入",type: 'warning'})
        //     return
        //   }
        //   //返回的是promise对象
        //   this.$http.post('user/login',this.loginForm).then((res)=>{
        //     if (res.success ===false)  return this.$message.error('登录失败！')
        //     this.$message.success("登录成功")
        //     //登录成功后把token保存到sessionStorage中
        //     window.sessionStorage.setItem('token',res.data.token)
        //     //跳转到后台
        //     this.$router.push('/home')
        //   })
        //
        // })
      },
      onResetForm(){

      }
    }
  }
</script>

<style scoped>
  .login_container {
    background-color: #0d3349;
    height: 100%;
  }

  .login_box {
    width: 450px;
    height: 300px;
    background-color: #ffffff;
    /*锐化边缘*/
    border-radius: 3px;
    /*绝对定位,这里父元素没有指定定位,会以浏览器为标准*/
    position: absolute;
    left: 50%;
    top: 50%;

    /*减去它的宽度和高度*/
    margin-left: -225px;
    margin-top: -150px;
  }

  /*logo头像的处理*/
  .logo_box {
    height: 120px;
    width: 130px;
    border-right: 1px solid #0d3349;
    border-radius: 50%;
    background-color: #0d3349;
    padding-top: 30px;
    position: absolute;
    left: 50%;
    /*这里用30px+120/2*/
    top: -90px;
    margin-left: -65px;
  }

  .form_box{
      margin-top: 90px;
      width: 90%;
    padding-left: 20px;
  }

  .btns_box{
    position: relative;
  }
  .btns_box .el-button:first-child{
    position: absolute;
    left: 20%;
  }
  .btns_box .el-button:nth-child(2){
    position: absolute;
    left: 60%;
  }

</style>
